<template>
  <div class="tools-page">
    <nav-header />
    <div class="tools-container">
      <div class="tools-grid">
        <div 
          v-for="category in toolCategories" 
          :key="category.id"
          class="category-section"
        >
          <h2 class="category-title">
            <el-icon><component :is="category.icon" /></el-icon>
            {{ category.name }}
          </h2>
          <div class="tools-list">
            <router-link
              v-for="tool in category.tools" 
              :key="tool.id"
              :to="tool.path"
              class="tool-card"
            >
              <div class="tool-icon">
                <img :src="tool.icon" :alt="tool.name">
              </div>
              <div class="tool-info">
                <h3 class="tool-name">{{ tool.name }}</h3>
                <p class="tool-desc">{{ tool.description }}</p>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Document, 
  Files, 
  Key, 
  Notebook,
  ArrowRight,
  Connection,
  Edit,
  Monitor,
  Setting
} from '@element-plus/icons-vue'
import NavHeader from '@/components/NavHeader.vue'

const router = useRouter()

const toolCategories = ref([
  {
    id: 'format',
    name: '格式化工具',
    icon: Document,
    tools: [
      {
        id: 'json',
        name: 'JSON 格式化',
        description: '快速格式化和验证 JSON 数据',
        icon: Document,
        path: '/tools/json'
      },
      {
        id: 'xml',
        name: 'XML 格式化',
        description: 'XML 文档格式化和校验工具',
        icon: Files,
        path: '/tools/xml'
      }
    ]
  },
  {
    id: 'encode',
    name: '编码转换',
    icon: Connection,
    tools: [
      {
        id: 'base64',
        name: 'Base64 转换',
        description: '支持文本和图片的 Base64 编解码',
        icon: Connection,
        path: '/tools/base64'
      },
      {
        id: 'url',
        name: 'URL 编解码',
        description: 'URL 安全的编码和解码工具',
        icon: Edit,
        path: '/tools/url'
      }
    ]
  },
  {
    id: 'generator',
    name: '生成工具',
    icon: Setting,
    tools: [
      {
        id: 'uuid',
        name: 'UUID 生成器',
        description: '生成唯一标识符 UUID',
        icon: Key,
        path: '/tools/uuid'
      },
      {
        id: 'mock',
        name: 'Mock 数据',
        description: '生成模拟测试数据',
        icon: Monitor,
        path: '/tools/mock'
      }
    ]
  }
])

const navigateToTool = (tool: any) => {
  router.push(tool.path)
}
</script>

<style lang="scss" scoped>
.tools-page {
  min-height: 100vh;
  background: $background-primary;

  .tools-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: calc($header-height + $spacing-lg) $spacing-xl $spacing-xl;

    .tools-grid {
      display: flex;
      flex-direction: column;
      gap: $spacing-xl;

      .category-section {
        .category-title {
          font-size: 18px;
          font-weight: 600;
          color: $text-primary;
          margin: 0 0 $spacing-md;
          display: flex;
          align-items: center;
          gap: $spacing-xs;

          .el-icon {
            color: $primary-color;
          }
        }

        .tools-list {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 24px;
          padding: 24px;

          .tool-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 24px;
            background: white;
            border-radius: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.06);
            opacity: 1;
            transform: none;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

            &:hover {
              transform: translateY(-2px);
              border-color: var(--el-color-primary);
              box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
              background: linear-gradient(to right bottom, white, rgba(255, 255, 255, 0.95));
            }

            .tool-icon {
              width: 48px;
              height: 48px;
              border-radius: 12px;
              background: var(--el-color-primary-light-9);
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.1);
              overflow: hidden;

              img {
                width: 24px;
                height: 24px;
                object-fit: contain;
              }
            }

            .tool-info {
              flex: 1;

              .tool-name {
                font-size: 16px;
                font-weight: 600;
                color: var(--el-text-color-primary);
                margin: 0 0 6px;
              }

              .tool-desc {
                font-size: 14px;
                color: var(--el-text-color-secondary);
                margin: 0;
                line-height: 1.5;
              }
            }
          }
        }
      }
    }
  }
}

// 暗黑模式适配
:root.dark {
  .tools-page {
    background: $dark-background;

    .tools-container {
      .tools-grid {
        .category-section {
          .category-title {
            color: $dark-text-primary;
          }

          .tools-list {
            .tool-card {
              background: rgba(255, 255, 255, 0.04);
              border-color: rgba(255, 255, 255, 0.08);
              box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

              &:hover {
                border-color: var(--el-color-primary);
                background: rgba(255, 255, 255, 0.06);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
              }

              .tool-icon {
                background: rgba(var(--el-color-primary-rgb), 0.1);
                box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.15);
              }

              .tool-info {
                .tool-name {
                  color: rgba(255, 255, 255, 0.9);
                }

                .tool-desc {
                  color: rgba(255, 255, 255, 0.6);
                }
              }
            }
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: $screen-md) {
  .tools-page {
    .tools-container {
      padding: calc($header-height + $spacing-lg) $spacing-md $spacing-md;

      .tools-grid {
        gap: $spacing-lg;

        .category-section {
          .tools-list {
            grid-template-columns: 1fr;
            gap: 16px;
            padding: 16px;
          }
        }
      }
    }
  }
}
</style> 